<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="tree">
        <div class="ov-title ">
          <strong>政策指标管理</strong>
        </div>
        <div style="padding: 15px">
          <el-input
              v-model="input"
              placeholder="请输入指标名称"
          >
            <template #prefix>
              <el-icon>
                <search/>
              </el-icon>
            </template>
          </el-input>
        </div>
        <div class="tree-box">
          <el-tree
              default-expand-all
              style="max-width: 600px"
              :data="treeList"
              :props="defaultProps"
              @node-click="handleNodeClick"
          />
        </div>

      </div>
    </el-col>
    <el-col :span="18">
      <div class="tree">
        <div class="ov-title ">
          <strong>指标信息</strong>
        </div>
        <div style="padding: 20px">
          <el-form :model="form" label-width="auto" style="max-width: 600px">

            <el-form-item label="所属菜单">
              <el-select v-model="form.region" placeholder="标签企业" disabled>
                <el-option label="Zone one" value="shanghai"/>
                <el-option label="Zone two" value="beijing"/>
              </el-select>
            </el-form-item>
            <el-form-item label="指标名称">
              <el-input v-model="form.name" disabled/>
            </el-form-item>
            <el-form-item label="单位">
              <el-input v-model="form.name" disabled/>
            </el-form-item>
            <el-form-item label="筛选方式">
              <el-radio-group v-model="form.tian" disabled>
                <el-radio value="Sponsor">数值填写</el-radio>
                <el-radio value="Venue">枚举值</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="枚举值内容">
              <el-input v-model="form.name" disabled/>
            </el-form-item>
            <el-form-item label="内容">
              <el-input v-model="form.name" disabled/>
            </el-form-item>

            <el-form-item label="最新编辑时间">
               <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="最新编辑时间"
                style="width: 100%"
            />
            </el-form-item>
            <el-form-item label="状态">
              <el-switch v-model="form.delivery"/>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-col>
  </el-row>
</template>


<script setup>
import {treeList} from '../data/data.js'
import {reactive, ref} from "vue";

const input = ref('')
const defaultProps = {
  children: 'children',
  label: 'indexName',
}
const form = reactive({
  tian:'Venue'
})

</script>


<style scoped lang="scss">
.tree {
  box-sizing: border-box;
  height: calc(100vh - 100px);
  background-color: #fff;
}

.ov-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e5e5e5;

  > strong {
    font-size: 16px;
    border-left: 4px solid #2368fa;
    padding-left: 10px;
  }
}

.tree-box {
  height: calc(100% - 140px);
  margin: 0 15px;
  border: 1px solid #dcdfe6;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: #8dc6ff;
}
</style>
